<template>
    <div class="Notice">
        <Header title="通知公告" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <loading  v-if="isflag" />
        <div ref="wrapper" class="box_notice">
            <ul :style="{'height': + Height + 'px'}">
                <li @click="die_info(item.title,item.createDate,item.content)" ref="li" class="box_li" v-for="(item,index) in list" :key="index">
                    <div class="box_one">
                        <p class="box_firt">{{item.title}}</p>
                        <p>{{item.createDate}}</p>
                    </div>
                    <div class="box_two">
                        <p>{{item.content}}</p>
                    </div>
                </li>

            </ul>
        </div>

        <div class="iconadd">
            <div class="cheng">
                <img src="../assets/icon_add_bg2.png">
                <p class="add" @click="Add">添加</p>
            </div>
        </div>
        <router-view></router-view>
        
    </div>
</template>

<script>
import Header from './header'
import BScroll from 'better-scroll'
import { notice } from '../old_request'
export default {
    data(){
        return { 
            list:[],
            Height:0,
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        Add(){                              //跳转添加页面
            this.$router.push('/increase');
        },
        die_info(Title,Time,Contant){           
            this.$router.push({
                name:'info',
                params:{title:Title,time:Time,total:Contant}       //实现点击 借助路由传参
            });
        },
        Obtain(){
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}blockId=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "userId":that.$store.state.userid,
                "blockId":that.$store.state.blockid,
                "pageNo":1,
                "pageSize":15
            }

            notice(data,that).then( (res) => {
                console.log(res)
                if(res.code === 0){
                    that.list = res.data;
                    that.isflag = false;            //关闭加载特效
                    that.$nextTick( ()=> {                            //开启流畅滚动
                        let scroll = new BScroll(that.$refs.wrapper,{scrollY:true,click:true,probeType: 1})
                        let li = that.$refs.li;
                            that.Height = li.length * (li[0].offsetHeight + 10);    //获取页面所需高度
                    })
                }
            })


        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        that.Obtain();
    },
    
}
</script>

<style scoped>
    .Notice{
        position: fixed;
        width: 100%;
        height: 100%;
        background: #EFEFF4;
        margin-top: 50px;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_notice{
        width: 95%;
        margin: 0px auto;
        height: 520px;
        overflow: hidden;
    }
    .box_notice ul{
        height: 1100px;
        padding-top: 10px;
    }
    .box_notice li{
        background: #FFFFFF;
        height: 80px;
        margin-top: 10px;
    }
    .box_li{
        display: flex;
        flex-direction: column;
    }
    .box_one{
        display: flex;
        position: relative;
        padding:15px 0 0 15px;
        font-size: 17px;
    }
    .box_one .box_firt{
        width: 110px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .box_one p:last-child{
        position: absolute;
        right: 20px;
    }
    .box_two p{
        width: 320px;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        font-size: 17px;
        padding: 15px 0 0 15px;
    }
    .iconadd{
        position: fixed;
        right: 20px;
        bottom: 30px;
    }
    .cheng{
        position: relative;
    }
    .iconadd img{
        height: 75px;
    }
    .iconadd .add{
        position: absolute;
        top:42px;
        right: 20px;
    }
</style>